<template>
  <div class="explore">
    <div class="topic">
      <!-- <div class="ulbox">
        <router-link to="/explore">
          <li>全部</li>
        </router-link>
        <router-link to="/explore/nature">
          <li>自然</li>
        </router-link>
        <router-link to="/explore/city">
          <li>城市</li>
        </router-link>
        <router-link to="/explore/sport">
          <li>运动</li>
        </router-link>
        <router-link to="/explore/people">
          <li>人物</li>
        </router-link>
        <router-link to="/explore/creatorworks">
          <li>签约摄影师</li>
        </router-link> -->
      <el-input placeholder="请输入查询内容" clearable v-model="searchTxt" @keydown.enter.native='enterFun'
        class="input-with-select">
        <el-button slot="append" @click="searchFun" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="opusBox" v-loading='loading'>
      <!-- 作品显示 -->
      <div class="contentpic" v-if="opusData && opusData.length>0">
        <div class="onebox" v-for="(item, index) in opusData" :key="index">
          <!-- 图片 -->
          <div class="imgBox2 mouseIn">
            <img :src="item.img" @click="toDetail(item)" class="imgStyle" alt="" />
          </div>
          <!--图片下的文字 -->
          <div class="imgBtnBox">
            <!-- 图片描述 -->
            <div class="textBox mouseIn" @click="toDetail(item)">
              {{ item.text }}
            </div>
            <!-- 设备 -->
            <div class="dispalyStyle equipmentBox">
              <div class="equipmentTxt">设备：</div>
              <div class="equipmentName">{{ item.phone }}</div>
            </div>
            <!-- 点赞和查看记录 -->
            <div class="dispalyStyle">
              <div class="lookPersonBox dispalyStyle">
                <div class="lookIconBox">
                  <svg t="1651737036374" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3011" width="18" height="19">
                    <path
                      d="M512 209.403241c-201.731514 0-374.009206 125.476783-443.808922 302.596759 69.798692 177.119977 242.077408 302.596759 443.808922 302.596759 201.933105 0 374.010229-125.476783 443.808922-302.596759C886.009206 334.880023 713.933105 209.403241 512 209.403241zM512 713.731514c-111.355157 0-201.731514-90.375334-201.731514-201.731514s90.375334-201.731514 201.731514-201.731514 201.731514 90.375334 201.731514 201.731514S623.355157 713.731514 512 713.731514zM512 390.961296c-66.772776 0-121.038704 54.265928-121.038704 121.038704s54.265928 121.038704 121.038704 121.038704 121.038704-54.265928 121.038704-121.038704S578.772776 390.961296 512 390.961296z"
                      p-id="3012" fill="#707070"></path>
                  </svg>
                </div>
                <div>{{ item.browse }}</div>
              </div>
              <div class="supportBox dispalyStyle ">
                <div class="supportIconBox" v-if="!item.support"
                  @click="agreeFun(item.id, item.agree,'getNaturalData')">
                  <svg t="1651736823648" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2639" width="18" height="18">
                    <path
                      d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                      fill="#707070" p-id="2640"></path>
                  </svg>
                </div>
                <!-- 取消点赞 -->
                <div v-else class="supportIconBox"
                  @click="noAgreeFun(item.id, item.agree,'getNaturalData')">
                  <svg t="1651905212123" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3207" width="18" height="18">
                    <path
                      d="M160 906.666667a64 64 0 0 1-64-64v-384a64 64 0 0 1 64-64h145.024c17.664-36.864 51.690667-101.888 113.834667-219.648 31.296-55.146667 100.970667-74.133333 155.434666-42.154667 54.186667 31.786667 77.44 98.688 55.082667 157.802667l-28.437333 75.093333h213.504c62.826667 0 113.557333 51.562667 113.557333 114.922667 0 6.570667-0.554667 13.141333-1.664 19.626666l-44.373333 259.477334c-14.506667 84.8-87.104 146.88-172.181334 146.88H160zM474.986667 205.738667a16255.445333 16255.445333 0 0 0-94.976 182.122666c-10.453333 20.48-18.24 36.096-23.36 46.762667a371.626667 371.626667 0 0 0-4.650667 10.069333l0.042667 397.973334h357.738666c53.717333 0 99.818667-39.424 109.098667-93.653334l44.373333-259.498666c0.490667-2.922667 0.746667-5.866667 0.746667-8.832 0-28.245333-22.314667-50.922667-49.578667-50.922667h-306.133333l61.226667-161.749333c11.370667-30.037333-0.426667-64-27.605334-79.957334a48.64 48.64 0 0 0-66.922666 17.706667zM288 458.666667h-128v384h128v-384z"
                      fill="#87b9fe" p-id="3208"></path>
                  </svg>
                </div>
                <div class="">{{ item.agree }}</div>
              </div>
            </div>
            <!-- 拍摄者名称 和时间 -->
            <div class="dispalyStyle dispalyJ">
              <div class="pusher dispalyStyle">
                <el-avatar class="avatar" size="small" :src="item.userimg"></el-avatar>
                <div class="userName">{{ item.username }}</div>
              </div>
              <div class="pushTime">{{ getDateYYMMDD(item.time) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="noData" v-else>
        暂无数据
      </div>
    </div>
    <Dialog :dialogVisible='dialogVisible' :data="dialogData" @closeetailDialog='closeetailDialog'
      @upData='searchFun' @agreeChange='changeFunAgreeFun' @noAgreeChange="changeFunNoAgreeFun" />
  </div>
  <!-- <router-view></router-view> -->
</template>

<script>
import Dialog from '../dialog/index.vue'
export default {
  components: {
    Dialog,
  },
  props: {},
  data() {
    return {
      loading: false,
      searchTxt: null,
      opusData: null,
      dialogVisible: false,
      userInfo: null,
      dialogData: {},
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.searchFun();
    this.getUserInfo();
  },
  methods: {
    toDetail(item) {
      this.dialogVisible = true;
      this.dialogData = item;
    },
    getUserInfo() {
      let is_login = localStorage.getItem("islogin");
      let params = {
        email: is_login,
      }
      this.$axios.post('/api/getUserInfo', params).then((res) => {
        let { data } = res
        this.userInfo = data[0];
      })
    },
    closeetailDialog() {
      this.dialogVisible = false;
    },
    enterFun(e) {
      if (e.key == 'Enter') {
        this.searchFun();
      }
    },
    searchFun() {
      // this.loading = true;
      let params = {
        search: this.searchTxt
      }
      this.$axios.post('/api/searchData', params).then((res) => {
        let { data } = res;
        this.opusData = data;
      }).finally(() => {
      })
    },
    // 点赞
    agreeFun(id, agree, funName) {
      let params = {
        id,
        agree: Number(agree) + 1,
        user_id: this.userInfo.id,
        noAgree: false,
      };
      console.log(params);
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          // this.init();
          // this.searchFun();
          this.changeFunAgreeFun(id)
        }
      });
    },
    changeFunAgreeFun(id) {
      this.opusData.forEach(el => {
        if (el.id == id) {
          el.agree = Number(el.agree) + 1;
          el.support = true;
        }
      });
    },
    // 取消点赞
    noAgreeFun(id, agree, funName) {
      let params = {
        id,
        agree: Number(agree) > 0 ? Number(agree) - 1 : Number(agree),
        user_id: this.userInfo.id,
        noAgree: true,
      };
      // console.log('取消点赞', params);
      this.$axios.post("/api/myAgree", params).then((res) => {
        let { status } = res;
        if (status == 200) {
          this.changeFunNoAgreeFun(id);
        }
      });
    },
    changeFunNoAgreeFun(id) {
      this.opusData.forEach(el => {
        if (el.id == id) {
          el.agree = Number(el.agree) - 1;
          el.support = false;
        }
      });
    }
  },
  created() { },

};
</script>
<style  scoped lang='scss'>
.explore {
  // padding: 10px 0;
  // background-color: #cccccc1c;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.topic {
  position: fixed;
  top: 3rem;
  left: 0;
  right: 0;
  z-index: 99;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 5%);
  &::v-deep .el-input-group {
    width: 60%;
    margin-top: 5px;
  }
}
.topic .ulbox {
  position: relative;
  width: 1200px;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 50px;
}
.topic .ulbox li {
  height: 3rem;
  box-sizing: border-box;
  margin: 0 0.75rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border-bottom: 0.15rem solid transparent;
  border-top: 0.15rem solid transparent;
}
.opusBox {
  padding-top: 50px;
  width: 1220px;
  margin: 0 auto;
  .toptitle {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .contentpic {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .onebox {
    margin-bottom: 30px;
    width: 280px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .textBox {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 250px;
    font-size: 16px;
    font-weight: bold;
  }
  .imgBox2 {
    width: 280px;
    height: 190px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    overflow: hidden;
  }
  .imgBtnBox {
    width: 280px;
    height: 130px;
    padding: 10px 5px;
    box-sizing: border-box;
  }
  .dispalyStyle {
    display: flex;
  }
  .imgStyle {
    width: 280px;
    height: 190px;
  }
  .equipmentBox {
    font-size: 14px;
    color: #999;
  }
  .equipmentBox {
    padding: 5px 0;
  }
  .lookPersonBox {
    margin-right: 30px;
  }
  .supportBox,
  .lookPersonBox {
    color: #999;
    font-size: 14px;
  }
  .avatar {
    margin-right: 10px;
  }
  .userName {
    text-align: left;
    width: 120px;
    line-height: 30px;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
  .dispalyJ {
    height: 40px;
    justify-content: space-between;
    border-top: 1px solid rgb(196, 196, 196);
    padding-top: 8px;
    font-size: 15px;
  }
  .pushTime {
    line-height: 30px;
    color: #999;
    font-size: 13px;
  }
  .hotStyle {
  }
  .hotItemBox {
    margin-right: 26px;
    background-color: #fff;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
  }
  .hotimg {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    width: 180px;
    height: 122px;
  }
  .hotTxt {
    color: #333;
    font-size: 13px;
    padding: 10px 0;
  }
  .mouseIn:hover {
    cursor: pointer;
    color: #1088f2;
  }
  .supportIconBox:hover {
    cursor: pointer;
  }
}
.noData {
  color: #ccc;
  font-size: 30px;
}
</style>
